Gruppieren: Expander – Collapse – Accordeons
Letztes Update:
21. September 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Elemente wie Tabs oder Accordeons reduzieren die Komplexität von Inhalten. Sie unterteilen umfangreichere Inhalte in Sinnabschnitte, geben den Seiten/Inhalten Struktur, helfen umfangreiche Inhalte gut strukturiert und auf überschaubarem Platz unterzubringen. Sie reduzieren die Komplexität von Inhalten, unterteilen umfangreichere Inhalte in Sinnabschnitte, geben den Seiten/Inhalten Struktur, verringern die initial angezeigte Inhaltsmenge und verbessern die Übersichtlichkeit. Nutzer können die Sinnabschnitte besser erfassen und weitere für sie interessante Inhalte auswählen bzw. per Interaktion anzeigen lassen.
Wann kommt dieses Element zum Einsatz?
Zur Strukturierung bzw. Verbesserung der Übersichtlichkeit/Wahrnehmbarkeit umfangreicher aber relevanter Inhalte.
Tab-Navigationen kommen für hierarchisch höherstehende Informationen zum Einsatz.
Akkordeons werden für hierarchisch tiefer einzustufende Inhalte verwendet – oder wenn die Sinnabschnitte eine gewisse Anzahl übersteigt wie beispielsweise auf FAQ Seiten.
Tab-Navigationen sind nicht als alternative zu Fortschrittsbalken geeinget und dürfen nur zur Strukturierung von Inhalten verwendet werden, welche keinen definierten Ablauf durch den Nutzer erfordern.
Akkkordeon-menüs können – sofern für eine Marke ausdrücklich definiert – als alternative zu Fortschrittsbalken zum Einsatz kommen.
Tabs und Accordeons können auch ineinander verschachtelt werden – beispielsweise ein Akkordeon innerhalb einer Tab-Navigation.
Tabs innerhalb von Tabs sind grundsätzlich möglich, erfordern jedoch eine abweichende optische Darstellung, welche aktuell nicht definiert ist.
UX Konzeption
Bei Accordeons muss besonders auf eine nutzerfreundliche Umsetzung geachtet werden, sonst kann es zu Verwechslungen mit Links kommen. Hinter Links erwarten Nutzer neue Seiten, hinter Accordeons erwarten sie erweiterte Inhalte. Wenn es zu Verwechslungen kommt hat dies Auswirkungen auf die Interaktionsraten, wichtige Informationen könnten dem Nutzer verborgen bleiben.
Einzelne Sektionen dürfen nicht zu viel Inhalt enthalten, da eine geöffnete, zu große Sektion die anderen Sektionen aus dem Sichtfeld schieben und es dem Nutzer so erschwert wird die Übersicht zu behalten. Die weiteren Sektionen werden dann erst wieder durch scrollen sichtbar, eine Aktion welche durch den Einsatz von Accordeons eigentlich vermieden werden sollte.
alle Sektionen sind initial zugeklappt
einzelne Sektionen reagieren (einklappen/ausklappen) ausschließlich auf Interaktion des Nutzers. Es erfolgt beispielsweise KEIN Einklappen von Sektionen wenn ein Nutzer eine neue Sektion ausklappt. Somit ist es dem Nutzer auch möglich mehrere Segmente zu öffnen.
beim Öffnen einer Sektion verschieben sich die nachfolgenden Teilbereiche der Websites nach unten. Es wird kein Inhalt überlagert.
Sich öffnende Unterelemente müssen ausreichend groß sein – bzw. sich automatisch an den Inhalt anpassen damit kein Text überlagert wird oder ein unnötig großer Abstand zur folgenden Sektion entsteht.
Aktive Sektionen werden zusätzlich zum sich ändernden Icon zusätzlich hervorgehoben damit diese vom Nutzer rascher erkannt werden können.
Das Öffnen und schließen von Sektionen wird durch Animationen für den Nutzer wahrnehmbar gemacht damit dieser gut erkennen kann dass sich Inhalte ausgeklappt und die folgenden Sektionen nach unten verschoben haben. Animationen dürfen nicht länger als 250 ms dauern.
Es kommt kein Autoscrolling zum Einsatz. Eine angeklickte Sektion darf beispielsweise NICHT zum oberen Bildschirmrand scrollen um den Nutzer nicht unnötig zu verwirren.
Als Icons kommen „Plus“ für öffnen und „X“ für Schließen zum Einsatz (keine Pfeile!)
Platzierung der Icons erfolgt links neben dem Label bzw der Überschrift (nicht Rechts)
Icons als Nicht-Text-Inhalte benötigen Textalternativen (WCAG Richtlinie 1.1.1.)
Akkordeons müssen, wie alle anderen Interaktionselemente auch, per Tastatur steuerbar sein.
Variante: im Content alleinstehend
Ist es konzeptionell nötig durchgehend bei allen Sektionen besonders viel Content unterzubringen, muss das Sektionselement (die Headline) beim Scrollen schwebend/sticky sichtbar bleiben und mitscrollen um die Übersichtlichkeit zu erhöhen und es dem Nutzer zu ermöglichen die Sektion zuzuklappen ohne dass er wieder ganz nach oben scrollen muss.
Variante: im Content innerhalb einer Tab-Navigation
Definition folgt….
Variante: Verwendung als Menü – speziell für Mobile Breakpoints
Sofern eine Verwendung von Accordeons als Menü bei vorliegender Marke definiert wurde findet sich diese unter >> Header
Variante: als Alternative zum Fortschrittsbalken zur Unterteilung umfangreicher Formulare
Die Verwendung von Expand-Elementen als Alternative zu Fortschrittsbalken zur Unterteilung umfangreicher Formulare kommt aktuell nicht zum Einsatz.
Strukturierte Daten / Schema.org
Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche
Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:
- Meta Tags und Strukturierte Daten
- https://schema.org/
- Einführung in das Markup für strukturierte Daten in der Google Suche auf developers.google.com
Weiterführendes zu Zugänglichkeit und Barrierefreiheit
Richtlinie für barrierefreie Webinhalte (WCAG)
Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.
Accessible Rich Internet Application (ARIA)
ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.
Detailliertere Informationen für vorliegendes Element:
UX-Writing
Was ist zu texten
- Sektions-Benennung
- Sektions-Inhalt
Wie ist zu texten
Es gelten die allgemeinen Regeln zu Text formulieren – interessant, verständlich und vertrauenswürdig schreiben und folgende spezifische Vorgaben:
- Sektions-Benennung:
- von Tabs und Accordeons muss besonders gut überlegt sein, da es sich bei dahinterliegenden Informationen um relevante Informationen für die entsprechende Botschaft der Seite handelt. (sekundäre Informationen würden mittels Links verknüpft werden) Darum ist es essentiell, dass Nutzer bereits beim Scannen der Seite erkennen und verstehen um welche Inhalte es sich hierbei handelt damit die Zugänglichkeit für wichtige Informationen bestehen bleibt.
- von Tabs besteht zumeist aus ein bis zwei Hauptwörtern, kann, sofern gut überlegt jedoch auch aus einer kurzen Frage bestehen.
- von Akkordeons kann grundsätzlich etwas länger ausfallen. Vielfach eignen sich hier Fragen besonders gut.
- Besonders auf Klarheit und Eindeutigkeit achten! “Gut zu Wissen”, “Mehr Informationen” “Details” ,…. sind keine guten Benennungen
- Sektions-Inhalt
Einzelne Sektionen dürfen nicht zu viel Inhalt enthalten, da eine geöffnete, zu große Sektion die anderen Sektionen aus dem Sichtfeld schieben und es dem Nutzer so erschwert wird die Übersicht zu behalten. Die weiteren Sektionen werden dann erst wieder durch scrollen sichtbar, eine Aktion welche durch den Einsatz von Accordeons eigentlich vermieden werden sollte.